<template>
   <div>
        <!-- <div class="post-share-container">
            <swiper :options="swiperOption" ref="myswiper">
                <swiper-slide v-for="template in templates" @click.native="showFullImg(template.post.t)" :key="template.id">
                    <img :src="template.post && template.post.t" alt="">
                </swiper-slide>
            </swiper>
        </div>
        <div class="exc-exc" @click="next">换一换</div> -->
        <div class="full-img">
            <img :src="poster" alt="">
        </div>
   </div>
</template>
<script>
import market from '@/api/market.js'
// import 'swiper/dist/css/swiper.css'
import { Toast, Indicator} from 'mint-ui'
// import { swiper, swiperSlide } from 'vue-awesome-swiper'
import {  } from 'mint-ui';

export default {
    data () {
        return {
            poster: '',
            // templates: [],
            // swiperOption: {
            //     pagination: {
            //         el: '.swiper-pagination',
            //         type: 'fraction'
            //     },
                
            // },
            // index: 0,
            // fullImg: '',
            // showFull: false,
        }
    },
    // components: {
    //     swiperSlide,
    //     swiper
    // },

    mounted() {
        this.getPoster()
    },
    methods: {
        // next() {
        //     const sw = this.$refs.myswiper.swiper
        //     this.index = sw.activeIndex < this.templates.length - 1 ? ++sw.activeIndex : 0
        //     sw.slideTo(this.index)
        // },
        // showFullImg(img) {
        //     this.showFull = true
        //     this.fullImg = img
        // },
        // getPosterTemplate() {
        //     market.getPosterTemplate().then(async(res) => {
        //         if (res.code == 0) {
        //             const arr = res.t
        //             if (arr && arr.length > 0) {
        //                 for(let item of arr) {
        //                     item.post = await this.getPoster(item.id)
        //                 }
        //                 this.templates = arr
        //             }
        //         }
        //     })
        // },
        getPoster() {
            market.getPoster({
                agentId: this.$route.query.agentId,
                id: this.$route.query.pid,
                price: this.$route.query.price,
                type: this.$route.query.type
            }).then(data => {
                this.poster = data.t
            })
        }
    }
}
</script>
<style>
   .mint-indicator-wrapper {
        z-index: 999;
    }
</style>

<style lang="less" scoped>
    .post-share-container {
        background-size: 100%;
        overflow: hidden;
        width: 90%;
        margin: 20px auto;
        img {
            width: 100%;
        }
    }
    .exc-exc {
        position: fixed;
        width: 100%;
        height: .8rem;
        text-align: center;
        font-size: .3rem;
        line-height: .8rem;
        background: #29abae;
        color: #fff;
        z-index: 10;
        bottom: 0;
        &:active {
            background: darken(#29abae, 10%)
        }
    }
    .full-img {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 12;
        overflow: auto;
        img {
            width: 100%;
        }
    }
</style>